<template>
	<div class="qopSon liveWater">
		<div class="float_div">
            <div @click="changeMenuF(index)" v-for="(item , index) of menu" :class="item ? 'active_leixin' : '' " :key="index" class="check_box_C">
                <span class="check_box"></span>
                <span>{{index}}</span>
            </div>
        </div>
        <div class="imgBox">
            <img :src="this.img" alt="">
        </div>
	</div>
</template>

<script>
import topTitle from './top'
export default {
    props:["msg"],
	components: {
        topTitle,
    },
	data() {
		return {
			title:{
				name: "实况降水图",
				time: "",
			},
			menu:{
                "近1小时降水":true,"近3小时降水":false,"近6小时降水":false,"近12小时降水":false,
                "近24小时降水":false,
            },
            img:""
		}
	},
	methods:{
		refreshAll(){

		},
        closeThis(){
            this.$emit('closep',this.msg.name);
        },
        getTimeCShow(str,idx){
            var pattern = /(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})/;
            var formatedDate = str.replace(pattern, '$1/$2/$3 $4:$5:$6');
            var timeC=new Date(formatedDate);
            return this.getSexTimeShow(timeC,idx);
        },
        getSexTimeShow(timeC,aa){
            var date1 = timeC,
            time1=date1.getFullYear()+"-"+(date1.getMonth()+1)+"-"+date1.getDate();//time1表示当前时间
            var date2 = new Date(date1);
            date2.setMinutes(date1.getMinutes()+aa);
            var Min=date2.getMinutes()>9?date2.getMinutes():"0"+(date2.getMinutes());
            var Hour=date2.getHours()>9?date2.getHours():"0"+(date2.getHours());
            var Mounth=date2.getMonth()+1>9?date2.getMonth()+1:"0"+(date2.getMonth()+1);
            var Day=date2.getDate()>9?date2.getDate():"0"+(date2.getDate());
            var time2 = ""+date2.getFullYear()+Mounth+Day+Hour+"0000";
        return time2;
        },
        getThisTime(){
            var date = new Date();
            var Day = date.getDate()>9?date.getDate():"0"+date.getDate();
            var Year = date.getFullYear();
            var Mounth = date.getMonth()>=9?date.getMonth()+1:"0"+(date.getMonth()+1);
            var hour=date.getHours()>9?date.getHours():"0"+date.getHours();
            var min=date.getMinutes()>9?date.getMinutes():"0"+date.getMinutes();
            var end=Year+""+Mounth+""+Day+""+hour+""+"0000";
            return end;
        },
        getThisTimeShow(){
            var date = new Date();
            var Day = date.getDate()>9?date.getDate():"0"+date.getDate();
            var Year = date.getFullYear();
            var Mounth = date.getMonth()>=9?date.getMonth()+1:"0"+(date.getMonth()+1);
            var hour=date.getHours()>9?date.getHours():"0"+date.getHours();
            var min=date.getMinutes()>9?date.getMinutes():"0"+date.getMinutes();
            var end=Year+"/"+Mounth+"/"+Day+" "+hour+":"+min+"0000";
            return end;
        },
		changeMenuF(index){

            var i;
            for(i in this.menu){
                this.menu[i]=false;
                if(i==index){
                    this.menu[i]=true;;
                }
            };
            var num= index.replace(/[^0-9]/ig,"");
            var end_time=this.getThisTime();
            var init_time=this.getTimeCShow(end_time,-60*num)
            this.img='http://10.135.118.81/ExportDataV2/GetAnyTimeSurfSta.ashx?ID=330600000&title='+index+'&begintime='+init_time+'&endtime='+end_time+'&prodcode=PRE'
        }

    },
	mounted(){
        this.$emit('refreshTop',this.title);
        var end_time=this.getThisTime();
        var init_time=this.getTimeCShow(end_time,-60)
        this.img='http://10.135.118.81/ExportDataV2/GetAnyTimeSurfSta.ashx?ID=330600000&title=近一小时降水&begintime='+init_time+'&endtime='+end_time+'&prodcode=PRE'
		// this.$ajax({method: 'get',	url: "http://172.21.129.156:8081/web/rain/RainInfo?code=331121000000&type=1",}).then((res)=>{
		// 	var _data=res.data.DS;
		// 	this.title.time=_data.time;
		// 	//console.log(_data)
		// })
		// .catch(function(err){
		// 	//console.log(err)
		// })
	}
}
</script>

<style lang="less">
.liveWater{
    .float_div{
        padding: 6px;
        font-size: 12px;
        &>div{
            padding: 3px 6px;
            float: left;
            cursor: pointer;
        }
        .check_box{
            display: inline-block;
            width: 8px;
            height: 8px;
            border: 1px solid #89dbf5;
        }
        .active_leixin{
            .check_box {
                background: #89dbf5;
            }
            span{
              color: #89dbf5;  
            }
        }
    }
    .imgBox{
        text-align: center;
        img{
            width: 95%;
            height: 300px;
        }
    }
}


</style>
